<template>
  <div class="my-container d-flex flex-column p-3">
    <div class="bg-table text-primary pl-3 font-weight-bold font-16">短信包续费</div>
    <div class="col d-flex flex-column  p-3">
      <div class="d-flex mb-3">
        <!-- <el-button v-for="(item,index) in tab" :key="index" :type="tabIndex==index?'primary':'text'"
          @click="tabIndex=index">{{item}}</el-button> -->
        <div v-for="(item, index) in tab" :key="index" @click="changeButtom(index)"
             :class="tabIndex == index ? 'tab-button-active' : ''" class="tab-button">{{ item }}
        </div>
      </div>
      <div class="col p-3 d-flex shadow rounded-lg">
        <div class="col d-flex flex-column  " v-if="tabIndex == 0">
          <div class="col over-auto" v-if="tabIndex == 0">
            <el-table border :data="smsList2">
              <el-table-column type="index" label="序号" width="100" align="center"/>
              <el-table-column
                header-align="center"
                align="center"
                label="短信包条数"
              >
                <template slot-scope="{ row }">
                  <span>{{ annualFeeValue1[row.feeType] || row.feeType }}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="fee"
                label="短信金额"
              />
              <el-table-column
                header-align="center"
                align="center"
                prop="feeDes"
                label="说明"
              />
              <el-table-column
                header-align="center"
                align="center"
                prop="status"
                label="启用/停用状态"
              >
                <template slot-scope="{ row }">
                  <span v-if="row.status == 0" style="color: #ff3141">停用</span>
                  <span v-else style="color: #07c160">启用</span>
                </template>
              </el-table-column>
              <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime" width="170">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
              <el-table-column label="更新时间" align="center" prop="createTime" width="170">
                <template slot-scope="scope">
                  {{ scope.row.updateTime}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="col d-flex flex-column" v-if="tabIndex == 1">
          <template>
            <div class="col over-auto">
<!--              <div class="mt-2 mb-3">-->
<!--                <el-button type="primary" icon="el-icon-plus" size="medium" @click="handlerAdd">新建</el-button>-->
<!--              </div>-->
              <el-table border :data="tableList" key="tableRef" ref="tableRef">
                <el-table-column type="index" label="序号" width="100" align="center"/>
                <el-table-column label="资金流水编码" prop="cashCode" align="center" class="bg-danger">
                </el-table-column>
                <el-table-column label="客户名称" prop="customerName" align="center" class="bg-danger">
                </el-table-column>
                <el-table-column label="项目名称" prop="projectName" align="center" class="bg-danger">
                </el-table-column>
                <el-table-column label="年费类型" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.feeType=='1' ? '1000条' : scope.row.feeType=='2' ? '2000条' : '3000条'}}
                  </template>
                </el-table-column>
                <el-table-column label="支付方式" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.modeOfPayment == 1 ? "支付宝" : "微信" }}
                  </template>
                </el-table-column>
                <el-table-column label="支付金额" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.paymentAmount }}
                  </template>
                </el-table-column>
                <el-table-column prop="purchaseTime" label="购买时间" align="center">
                </el-table-column>
                <el-table-column prop="expireTime" label="短信余量" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" prop="expireTime">
                  <template slot-scope="scope">
                    <el-button type="primary" size="medium" @click="handlerDetail(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination class="d-flex justify-content-end" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
                          @pagination="pagination"/>
            </div>
          </template>
        </div>

        <div class="col d-flex flex-column" v-if="tabIndex == 2">
          <template>
            <div class="col over-auto">
              <el-table border :data="dxTableData" key="tableRef2" height="100%" ref="tableRef2">
                <el-table-column type="index" label="序号" width="100" align="center"/>
                <!--								<el-table-column label="应用场景" prop="applicationName" align="center" class="bg-danger">-->
                <!--								</el-table-column>-->
                <el-table-column label="短信接收人" prop="recipient" align="center"/>
                <el-table-column label="接收电话" prop="recipientPhone" align="center"/>
                <el-table-column label="发送时间" prop="createTime" align="center"/>
                <el-table-column label="短信内容" prop="smsDes" align="center"/>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="onDetail(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <pagination class="d-flex justify-content-end" :total="dxcount" :page.sync="dxpageIndex"
                        :limit.sync="dxpageSize" @pagination="dxpagination"/>
          </template>
        </div>
      </div>
    </div>


    <yc-dialog ref="addDialog" dialogTitle="新建" :show-center="false">
      <template #content>
        <div class="dialog-content">
          <el-form
            ref="accountModelRef"
            :rules="newAccountModelRules"
            :model="newAccountModel"
            :disabled="detailsDisabled"
            label-width="90px"
          >
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="newAccountModel.customerName" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="套餐类型" prop="feeType">
              <el-select v-model="newAccountModel.feeType">
                <el-option
                  v-for="item in feeTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式" prop="modeOfPayment">
              <el-select v-model="newAccountModel.modeOfPayment">
                <el-option
                  v-for="item in modeOfPaymentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="支付金额" prop="paymentAmount">
              <el-input v-model="newAccountModel.paymentAmount" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="支付截图" prop="paymentAmountPic">
              <el-upload
                :action="$uploadUrl + upload"
                class="avatar-uploader"
                v-model="newAccountModel.paymentAmountPic"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="newAccountModel.paymentAmountPic"
                  :src="newAccountModel.paymentAmountPic"
                  class="avatar"
                />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  :class="{ drop: detailsDisabled }"
                ></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
<!--        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>-->
        <el-button @click="$refs.addDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- app权限 -->
    <yc-dialog ref="SMSDialog" :showCenter="false" dialogTitle="短信详情查看">
      <template #content>
        <el-form ref="SMSForm" :model="smsDialogForm" label-position="right" label-width="100px">
          <el-form-item label="短信接收人">
            <span>{{ smsDialogForm.recipient }}</span>
          </el-form-item>
          <el-form-item label="接收电话">
            <span>{{ smsDialogForm.recipientPhone }}</span>
          </el-form-item>
          <el-form-item label="发送时间">
            <span>{{ smsDialogForm.createTime }}</span>
          </el-form-item>
          <el-form-item label="短信内容">
            <span>{{ smsDialogForm.smsDes }}</span>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="onSMSSave">确定</el-button>
        <el-button @click="$refs.SMSDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- 点击获取支付信息 -->
    <yc-dialog ref="zfDialog" dialogWidth="20%" :showCenter="false" dialogTitle="支付信息">
      <template #content>
        <div class="w-100 d-flex flex-column justify-content-center align-items-center">
          <div style="width: 200px;height: 200px;" class="bg-dark rounded-lg QRCode"></div>
          <div class="text-dark mt-3">请使用微信扫描二维码</div>
        </div>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import {
    queryAllProjectToFee,
    queryProjectAllowance,
    queryProjectRenewalRecords,
    queryPageSmsPackage,
    queryAllProject,
    insertCashFlow, queryProjectCostType, queryOneCashFlow
  } from "@/api/costManage/index"
  import ycDialog from "@/components/pageDialog"
  import { getToken } from "@/utils/auth"

  export default {
    components: {
      ycDialog
    },
    data() {
      return {
        count: 0,
        pageIndex: 1,
        pageSize: 10,
        dxcount: 0,
        dxpageIndex: 1,
        dxpageSize: 10,
        smsForm: {
          pay: 1
        },
        smsStrip: "",
        tab: ["短信包套餐", "续费记录", "短信包使用记录"],
        tabIndex: 0,
        smsList: [],
        smsIndex: 0,
        smsDialogForm: {
          scene: ""
        },
        smsList2: [],
        annualFeeValue1: {
          1: "1000",
          2: "2000",
          3: "3000",
          4: "4000"
        },
        rules: {
          scene: [{
            required: true,
            message: "请输入应用场景",
            trigger: "blur"
          }]
        },
        zffsList: [
          { label: "支付宝", value: 1 },
          { label: "微信", value: 2 },
          { label: "银行转账", value: 3 }
        ],
        tableList: [],
        dxTableData: [],

        newAccountModel: {
          purchaseType: "2",
          projectCode: "",
          feeType: "",
          modeOfPayment: "",
          paymentAmountPic: ""
        },
        newAccountModelRules: {
          projectCode: [{ required: true, message: "请选择项目名称", trigger: "change" }],
          feeType: [{ required: true, message: "请选择套餐类型", trigger: "change" }],
          modeOfPayment: [{ required: true, message: "请选择支付方式", trigger: "change" }],
          paymentAmountPic: [{ required: true, message: "请上传支付截图", trigger: "change" }]
        },
        headers: {
          token: getToken()
        },
        upload: "/uploadManager/upload",
        allProjectList: [],
        feeTypeList: [
          { name: "1000条", value: "1" },
          { name: "2000条", value: "2" },
          { name: "3000条", value: "3" }
        ],
        modeOfPaymentList: [
          { label: "支付宝", value: "1" },
          { label: "微信", value: "2" },
          { label: "银行转账", value: "3" }
        ],
        addOrUpdateLoading: false,
        detailsDisabled: false
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {
      // this.getProjectowance()
      this.queryProjectCostType()
    },
    // 存放方法事件 - 会在数据变化时被调用
    methods: {
      changeButtom(index) {
        this.tabIndex = index
        switch (index) {
          case 0:
            // this.getProjectowance()
            this.queryProjectCostType()
            break
          case 1:
            this.getProjectRenewalRecords()
            break
          case 2:
            this.getPageSmsPackage()
            break
          default:
            break
        }
      },
      async queryProjectCostType() {
        const res = await queryProjectCostType({ remark2: 2 })
        if (res.status == "200") {
          this.smsList2 = res.object.smsFee
        }
      },
      async getProjectowance() {
        const res = await queryProjectAllowance()
        if (res.status == "200") {
          this.smsStrip = res.object.smsStrip
        }
      },
      async getProjectRenewalRecords() {
        const res = await queryProjectRenewalRecords({
          purchaseType: 2,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        })
        if (res.status == "200") {
          this.tableList = res.object.data
          this.count = res.object.count
        }
      },
      async getPageSmsPackage() {
        const res = await queryPageSmsPackage({ pageIndex: this.dxpageIndex, pageSize: this.dxpageSize })
        if (res.status == "200") {
          this.dxTableData = res.object.data
          this.dxcount = res.object.count
        }
      },
      //弹窗保存
      onSMSSave() {
        this.$refs.SMSForm.validate((valid) => {
          if (!valid) return
          this.$refs.SMSDialog.dialogVisible = false
        })
      },
      pagination(pageItem) {
        this.pageIndex = pageItem.page
        this.pageSize = pageItem.limit
        this.getProjectRenewalRecords()
      },
      dxpagination(pageItem) {
        this.dxpageIndex = pageItem.page
        this.dxpageSize = pageItem.limit
        this.getPageSmsPackage()
      },
      onDetail(row) {
        this.smsDialogForm = row
        this.$refs.SMSDialog.dialogVisible = true
      },


      openPayment() {
        this.$refs.zfDialog.dialogVisible = true
      },
      onZFSave(){},

      handlerAdd() {
        this.queryAllProject()
        Object.keys(this.newAccountModel).forEach((item) => {
          this.newAccountModel[item] = ""
        })
        this.newAccountModel["purchaseType"] = "2"
        if (this.$refs.accountModelRef) {
          this.$refs.accountModelRef.clearValidate()
          this.$refs.accountModelRef.resetFields()
        }

        this.$refs.addDialog.dialogVisible = true
      },
      queryAllProject() {
        queryAllProject().then(res => {
          this.allProjectList = res.object
        })
      },
      handleLogoSuccess(id, file) {
        this.newAccountModel.paymentAmountPic = file.response.object.url
      },
      beforeAvatarUpload(file) {
        // const isType = this.fileType.includes(file.type)
        const isLt2M = file.size / 1024 / 1024 < 5

        // if (!isJPG) {
        //   this.$message.error("上传头像图片只能是 JPG 格式!")
        // }
        // if (!isType) {
        //   this.$message.error("上传文件格式有问题！")
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 5MB!")
        // }
        // return isJPG && isLt2M
        // return isType && isLt2M
      },
      async handlerDetail(row) {
        // await this.queryProjectOfAnFee()

        const { object } = await queryOneCashFlow({
          cashCode: row.cashCode
        })

        this.newAccountModel.customerName = object.customerName
        this.newAccountModel.paymentAmount = object.paymentAmount
        this.newAccountModel.feeType = object.feeType
        this.newAccountModel.modeOfPayment = object.modeOfPayment
        this.newAccountModel.paymentAmountPic = object.paymentAmountPic

        this.detailsDisabled = true
        this.$refs.addDialog.dialogVisible = true
      },
      dialogSave() {
        this.$refs.accountModelRef.validate(async (v) => {
          if (v) {
            const { message, status } = await insertCashFlow(this.newAccountModel)
            if (status == 200) {
              this.changeButtom(1)
              this.$message.success(message)
              this.$refs.addDialog.dialogVisible = false
            }
          }
        })
      }
    }
  }
</script>
<style scoped>
  .QRCode {
    background-image: url("../../../../assets/img/QRCode.png");
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    /* cursor: no-drop; */
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .drop {
    cursor: no-drop;
  }
</style>
